<template>
    <div id="jx-add-class" class="jx-container">
        <BreadCrumb />
        <div class="jx-content">
            <el-form class="demo-form-inline clearfix" :inline="true" :model="formInline" ref="ruleForm" :rules="rules" label-width="90px">
                <el-form-item label="班级名称：" prop="user">
                    <el-input v-model="formInline.user" placeholder="请输入班级名称" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="年级：" prop="class">
                    <el-input-number v-model="formInline.class" controls-position="right" @change="handleChange" :min="2015" ></el-input-number>
                </el-form-item>
                <el-form-item style="float: right;">
                    <div class="button-style" style="width:90px;" @click="onSubmit">保 存</div>
                </el-form-item>
            </el-form>
            <div class="jx-add-table-title">
                <h3>导入学生预览</h3>
                <div class="add-title-btn-box">
                    <span @click="ExcelImport">Excel导入 <i class="iconfont icon-daoru1"></i></span>
                    <span @click="HistoryImport">历史班级导入 <i class="iconfont icon-daoru1"></i></span>
                </div>
            </div>
            <div class="table">
                <el-table  :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="name"label="学生名称"></el-table-column>
                    <el-table-column prop="userNumber" label="学号"></el-table-column>
                    <el-table-column prop="sexName" label="性别"></el-table-column>
                    <el-table-column prop="telephoneNumber" label="联系方式"></el-table-column>
                    <el-table-column prop="email"label="邮箱"></el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    v-if="totalCount > 0">
                </el-pagination>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false"  class="dialog-excel" title="Excel导入" :visible.sync="dialogExcel" width="490px">
            <div class="dialog-content">
                <div class="excel-btn-box">
                    <el-button class="button-style">上传Excel<input id="excel-file" type="file" multiple="multiple" auto-complete="off" @change="GetFile"></input></el-button>
                    <a href="/tes/user/model/download/student"><span>学生信息模板.xls <i class="iconfont icon-tubiaozhizuo-"></i></span></a>

                </div>
                <p v-if="dialogExcelFile">{{ dialogExcelFile }} <i class="iconfont icon-shanchu" @click="ExcelDelete"></i></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="ExcelSave">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <el-dialog  class="dialog-excel-tips" title="提示" :visible.sync="dialogExcelTips" width="490px">
            <div class="dialog-content">
                <p>
                    <span>XXX,XXX,XXX</span>等学生已经在<span>YYY班级（XXX编号）</span>中存在是否将重复学生导入该班级？
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogExcelTips = false">是</el-button>
                <el-button class="button-style" @click="dialogExcelTips = false">否</el-button>
            </span>
        </el-dialog> -->
        <el-dialog :close-on-click-modal="false"  class="dialog-history" title="快速导入" :visible.sync="dialogHistory" width="660px">
            <div class="dialog-content">
                <div class="content-select">
                    <span class="select-title">我的历史班级</span>
                    <div class="select-box">
                        <el-input v-model="historyClassInfo" placeholder="请输入班级名称/编号"></el-input>
                        <el-button class="button-style" @click="HistorySelect">查 询</el-button>
                    </div>
                </div>
                <div class="history-tips" v-if="historyClassList.length == 0">
                    暂无数据
                </div>
                <div class="content-list" v-else >
                    <div class="list-item" v-for="(item, index) in historyClassList" :key="index" :class="{ 'active' : historyImportIndex !== '' &&  historyImportIndex == index }">
                        <div class="item-title">
                            <div class="title-left fl">
                                <div class="title-left-heading" v-text="item.name"></div>
                                <div class="title-left-text">
                                    <span>编号：{{ item.id }}</span>
                                    <span>学生：{{ item.studentNum }}人</span>
                                    <span @click="lookList(index)">查看</span>
                                </div>
                            </div>
                            <div class="title-right fr" @click="HistoryImportSelect(item.id, index)">
                                导入<i class="iconfont icon-daoru1"></i>
                            </div>
                        </div>
                        <div class="item-content" v-show="item.listFlag ">
                            <span v-for="(item2, index2) in item.users" :key="index2">
                                {{ item2.name }} <em v-if="index2 == 9">...</em>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogHistory = false">取 消</el-button>
                <el-button class="button-style" @click="HistoryImportSave">确 认</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false"  class="dialog-history-tips" title="提示" :visible.sync="dialogHistoryTips" width="490px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="item in historyTipsInfo">{{ item }}</p>
                </div>
                <div class="content-notation">
                    <!-- 注: 1、继续导入，重复学生从原班级移除。2、不导入，重复学生在原班级保留 。 -->
                    <el-radio v-model="historyImportRadio" label="1">继续导入，重复学生从原班级移除。</el-radio>
                    <el-radio v-model="historyImportRadio" label="2">不导入，重复学生在原班级保留。</el-radio>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="HistoryTipUnImport">取消</el-button>
                <el-button class="button-style" @click="HistoryTipImport">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import BreadCrumb from "@/components/BreadCrumb.vue";
    export default {
        components: {
            BreadCrumb
        },
        data () {
            return {
                // 表单
                formInline: {
                    user: '',
                    class: ''
                },
                // 表单验证规则
                rules: {
                    user: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' },
                    ],
                    class: [
                        { required: true, message: '请选择年级', trigger: 'change' }
                    ]
                },
                // 学生列表
                tableData: [],
                // 当前页码
                currentPage: 1,
                // 每页条数
                pagesize: 10,
                // 总条数
                totalCount: 0,

                // 课程ID
                coursesId: '',
                // Excel导入
                dialogExcel: false,
                // Excel导入文件名称
                dialogExcelFileName: '',
                dialogExcelFile: '',
                // Excek导入提示
                // dialogExcelTips: false,
                // 快速导入
                dialogHistory: false,
                input: '',
                // 历史导入提示
                dialogHistoryTips: false,
                // 历史班级value
                historyClassInfo: '',
                // 用户对错误提示作出的决定 true：继续导入 ；false：过滤 ；null：没有作出决定
                errorFlag: '',
                // 导入历史班级Id
                studentclassId: '',
                // 历史提示信息
                historyTipsInfo: [],
                // 导入不导入radio
                historyImportRadio: '1',
                // 历史班级列表DATA
                historyClassList: [],
                // 历史班级列表高度
                contentHeight: '',
                // 历史导入选中index
                historyImportIndex: '',
                // 历史导入选中列表班级ID
                historyImportId: '',
                //yx添加 详情接收跳转参数
                params:'',
                //yx添加 管理页面接收参数
                flag:''


            }
        },
        created () {
            //Excel导入
            // this.$confirm('<span>XXX,XXX,XXX</span>'+'等学生已经在'+'<span>YYY班级（XXX编号）</span>'+'中存在是否将重复学生导入该班级？', '提示', {
            //     confirmButtonText: '否',
            //     cancelButtonText: '是',
            //     dangerouslyUseHTMLString: true,
            //     customClass: 'excel-message'
            // }).then(() => {
            //     alert('否')
            // }).catch(() => {
            //     alert('是')
            // });
            let self = this
            //yx修改 获取跳转参数
            this.params = this.$route.query.flag
            this.flag = this.$route.query.flagFns
           // console.log( this.params,1)
           // console.log( this.flag,2)
            // 课程ID
            self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
        },
        methods: {
            // 页面数据列表初始化
            init() {
                let self = this
                self.$http.post('/tes/user/model/parse',{

                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                    }else{

                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 保存数据
            onSubmit() {
                let self = this
                self.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        const loading = self.$loading({
                            lock: true,
                            text: '保存中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        let formData = new FormData()
                        formData.append('file', self.dialogExcelFileName)

                        self.$http.post('/tes/course/'+self.coursesId+'/class?studentclassId='+self.historyImportId+'&name='+self.formInline.user+'&grade='+self.formInline.class+'&errorFlag='+self.errorFlag, formData,
                            {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            }
                        ).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                // self.$message({
                                //     message: '保存成功',
                                //     type: 'success'
                                // })
                                loading.close()
                                //YX修改
                                if(self.params && !self.flag){
                                    // 跳转班级管理页面
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/Management/ManageClass/ManageList',
                                   })
                                }else{
                                     // 跳转课程详情页
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/CourseDetail',
                                        query: {
                                            id: res.data
                                        }
                                    })
                                   self.$localstorage.putLocalStorage('setCourseId',res.data)
                                }

                            }else if(res.code == '100105'){
                                loading.close()
                                self.historyTipsInfo = res.data
                                self.dialogHistoryTips = true
                            }else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    } else {
                        console.log('error submit!!')
                        return false;
                    }
                })
            },
            // 重复提示导入
            HistoryTipImport() {
                let self = this
                // 调用保存数据函数
                self.errorFlag = self.historyImportRadio == 1 ? true : false
                self.onSubmit()
            },
            // 重复提示不导入
            HistoryTipUnImport() {
                let self = this
                // 关闭提示
                self.dialogHistoryTips = false
                // 重置提示信息
                self.historyTipsInfo = []
            },
            //计数
            handleChange(value) {
                console.log(value);
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                //this.init()
            },
            // 历史导入
            HistoryImport() {
                let self = this
                self.$http.get('/tes/course/history?classInfo='+ self.historyClassInfo).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let historyClassList = res.data
                        historyClassList.forEach(item => {
                            item.listFlag = false
                        })
                        self.historyClassList = historyClassList
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                self.dialogHistory = true
            },
            // 历史班级查询
            HistorySelect() {
                let self = this
                self.$http.get('/tes/course/history?classInfo='+ self.historyClassInfo).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let historyClassList = res.data
                        historyClassList.forEach(item => {
                            item.listFlag = false
                        })
                        self.historyClassList = historyClassList
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 历史导入选择
            HistoryImportSelect(id, index){
                let self = this
                // 历史导入选中列表班级ID
                self.historyImportId = id
                self.historyImportIndex = index
            },
            // 历史导入保存
            HistoryImportSave(){
                let self = this
                self.currentPage = 1
                self.pagesize = 10
                if(typeof self.historyImportIndex == 'string'){
                    self.$message.error('请选择要导入的班级')
                    return
                }
                self.$http.get('/tes/course/'+self.coursesId+'/class/'+self.historyImportId+'/student').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '学生导入成功',
                            type: 'success'
                        })
                        // 添加数据
                        self.tableData = []
                        self.tableData = res.data
                        self.dialogHistory = false
                        self.totalCount = res.data.length
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // Excel导入
            ExcelImport() {
                let self = this
                self.dialogExcelFile = ''
                self.dialogExcel = true
            },
            // Excel文件上传
            GetFile($event) {
                let self = this
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType != 'xls' && fileType != "xlsx"){
                    self.$message.error('请上传Excel文件!')
                    return
                }
                self.dialogExcelFileName = $event.target.files[0]
                self.dialogExcelFile = $event.target.files[0].name
                $event.target.value=''
            },
            // Excel文件删除
            ExcelDelete() {
                let self = this
                // 清空数据
                self.dialogExcelFile = ''
            },
            // Excel保存
            ExcelSave() {
                let self = this
                self.currentPage = 1
                self.pagesize = 10
                if(self.dialogExcelFileName == ''){
                    self.$message.error('请上传Excel文件!')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.dialogExcelFileName);

                self.$http.post('/tes/user/model/parse', formData).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '学生导入成功',
                            type: 'success'
                        })
                        // 添加数据
                        self.tableData = []
                        self.tableData = res.data
                        self.dialogExcel = false
                        self.totalCount = res.data.length
                        loading.close()
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 查看班级学生列表
            lookList(index) {
                let self = this
                let historyClassList = self.historyClassList
                var listFlag = self.historyClassList[index].listFlag
                historyClassList.forEach(item => {
                    item.listFlag = false
                })
                historyClassList[index].listFlag = !listFlag
                self.historyClassList = historyClassList
            }
        }
    }
</script>

<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    //message样式
    // .el-message-box{
    //     border:none;
    //     .el-message-box__header{
    //         height: 45px;
    //         line-height: 45px;
    //         padding: 0;
    //         background: #070e28;
    //         .el-message-box__title{
    //             line-height: 45px;
    //             span{
    //                 font-size: 14px;
    //                 color: #fff;
    //                 margin-left: 20px;
    //             }
    //         }
    //         .el-message-box__headerbtn{
    //             i{
    //                 color: #fff;
    //             }
    //         }
    //     }
    //     .el-message-box__btns{
    //         text-align: center;
    //         margin-bottom: 24px;
    //         .el-button{
    //             border: 1px solid #1277eb;
    //             height: 32px;
    //             width: 90px;
    //             text-align: center;
    //             vertical-align: middle;
    //             line-height: 30px;
    //             color: #1277eb;
    //             cursor: pointer;
    //             border-radius: 20px;
    //             padding: 0 16px;
    //             font-size: 14px;
    //             display: inline-block;
    //             box-sizing: border-box;
    //             &.el-button--primary{
    //                 background: #fff;
    //                 margin-left: 18px;
    //             }
    //             &:hover {
    //                 background: $btn-blue;
    //                 color: $white;
    //             }
    //         }
    //     }
    //     &.excel-message{
    //         width: 490px;
    //         .el-message-box__content{
    //             padding: 45px 60px;
    //             .el-message-box__message{
    //                 p{
    //                     font-size: 14px;
    //                     span{
    //                         color: #385899;
    //                     }
    //                 }
    //             }
    //         }
    //     }
    //     &.history-message{
    //         width: 490px;
    //     }
    // }
    #jx-add-class{
        .jx-content{
            margin-top: 24px;
            .el-form {
                &.el-form--inline{
                    .el-form-item__content{

                    }
                }
                .el-input-number{
                    width: 110px;
                    height: 32px;
                    line-height: 32px;
                    &.is-controls-right{
                        .el-input-number__increase{
                            height: 16px;
                            line-height: 16px;
                        }
                    }
                    .el-input{
                        width: 110px;
                        input{
                            width: 110px;
                        }
                    }
                }

                .el-form-item{
                    margin-bottom: 0;
                    .el-form-item__label{
                        padding: 0;
                    }
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }
        .table{
            margin-top: 18px;
        }
        .jx-add-table-title{
            height: 36px;
            line-height: 36px;
            margin-top: 25px;
            h3{
                float: left;
                font-size: 16px;
                color: #727272;
                font-weight: normal;
                line-height: 36px;
                margin-left: 15px;
            }
            .add-title-btn-box{
                float: right;
                span{
                    color: #1277eb;
                    font-size: 14px;
                    margin-left: 45px;
                    cursor: pointer;
                    i{
                        margin-left: 5x;
                    }
                }
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        //elcel导入
        .dialog-excel{
            .excel-btn-box{
                text-align: center;
                margin-top: 15px;
                height: 32px;
                line-height: 32px;
                .button-style{
                    position: relative;
                    width: 110px;
                    margin-right: 20px;
                    &:hover{
                        span{
                            color: $white;
                        }
                    }
                    #excel-file{
                        position: absolute;
                        width: 100%;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background:#cc281a;
                        opacity: 0;
                    }
                }
                span{
                    color: #1277eb;
                    cursor: pointer;
                    i{
                        vertical-align: text-top;
                        margin-left: 5px;
                    }
                }
            }
            P{
                margin-top: 25px;
                text-align: center;
                font-size: 14px;
                color: $title-gray;
                i{
                    font-size: 18px;
                    color: #385899;
                    margin-left: 10px;
                }
            }
        }
        //excel导入提示
        .dialog-excel-tips{
            .el-dialog__body{
                padding: 45px 60px;
            }
            .dialog-content{
                p{
                    line-height: 28px;
                    span{
                        color: #385899;
                    }
                }
            }
        }
        //历史导入
        .dialog-history{
            .el-dialog__body{
                padding: 40px 65px;
            }
            .content-select{
                height: 32px;
                line-height: 32px;
                .select-title{
                    float: left;
                    font-size: 18px;
                    color: #385899;
                }
                .select-box{
                    float: right;
                    .el-input{
                        float: left;
                        width: 180px;
                        input{
                            width: 100%;
                        }
                    }
                    .button-style{
                        width: 90px;
                        text-align: center;
                        margin-left: 20px;
                    }
                }
            }
            .content-list{
                width: 100%;
                max-height: 300px;
                overflow-y: scroll;
                margin-top: 20px;
                padding-right: 10px;
                &::-webkit-scrollbar {
                    width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #6589ae
                }
                .list-item{
                    margin-top: 20px;
                    padding: 15px 18px 0;
                    border: solid 1px #dbdbdb;
                    border-radius: 3px;
                    &:first-child{
                        margin-top: 0;
                    }
                    &.active{
                        border-color: #1277eb;
                    }
                }
                .item-title{
                    overflow: hidden;
                    height: 58px;
                    .title-left-heading{
                        font-size: 16px;
                        color: $title-gray;
                    }
                    .title-left-text{
                        margin-top: 10px;
                        span{
                            font-size: 14px;
                            color: $table-gray;
                            margin-right: 25px;
                            &:last-child{
                                color: $blue;
                                cursor: pointer;
                            }
                        }
                    }
                }
                .title-right{
                    line-height: 53px;
                    font-size: 14px;
                    color: $btn-blue;
                    cursor: pointer;
                    i{
                        margin-left: 4px;
                    }
                }
                .item-content{
                    padding-top: 18px;
                    border-top: solid 1px #d9d9d9;
                    overflow: hidden;
                    span{
                        float: left;
                        width: 20%;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        margin-bottom: 24px;
                    }
                }
            }
            .history-tips{
                text-align: center;
                margin-top: 50px;
                font-size: 16px;
            }
        }
        //历史导入提示
        .dialog-history-tips{
            .el-dialog__body{
                padding: 45px 60px 15px;
            }
            .dialog-content{
                p{
                    line-height: 28px;
                    span{
                        color: #385899;
                    }
                }
                .content-box{
                    max-height: 200px;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 4px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c0c0c0;
                    }
                }
                .content-notation{
                    margin-top: 30px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #1277eb;
                    padding-left: 20%;
                    .el-radio{
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
</style>

